<template>
  <div class="app-container">
      成绩查询
    <el-row type="flex" class="row-bg" justify="center" :gutter="20">
      <el-col :span="12">
      <el-input
      placeholder="请输入学生姓名"
      prefix-icon="el-icon-search" clearable v-model="param.studentName">
      </el-input>
      <el-input v-if="this.$store.state.user.userType === 0"
      placeholder="请输入教师姓名"
      prefix-icon="el-icon-search" clearable v-model="param.teachName">
      </el-input>
      </el-col>
      <el-col :span="4">
    <el-button icon="el-icon-search" circle @click="selectRsult"></el-button>
      </el-col>
    </el-row>
    <el-row>
    <el-button type="primary" @click="exportResult">成绩导出</el-button>
    <el-table :data="resultList" style="width: 100%;margin-top:30px;" border>
      <el-table-column align="center" label="学号" width="80">
        <template slot-scope="scope">
          {{ scope.row.studentAccount }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="姓名" width="220">
        <template slot-scope="scope">
          {{ scope.row.studentName }}
        </template>
      </el-table-column>
      <el-table-column v-if="this.$store.state.user.userType === 0" align="header-center" label="指导老师姓名">
        <template slot-scope="scope">
          {{ scope.row.teachName }}
        </template>
      </el-table-column>
     <el-table-column align="header-center" label="平时成绩">
        <template slot-scope="scope">
          {{ scope.row.peacetimeResult }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="中期检查成绩">
        <template slot-scope="scope">
          {{ scope.row.centreResult }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="最终验收成绩">
        <template slot-scope="scope">
          {{ scope.row.finalResult }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="总成绩">
        <template slot-scope="scope">
          {{ scope.row.sumResult }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="detail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
      
    </el-table>
    </el-row>
    <!--分页组件-->
<el-pagination background layout="prev, pager, next"  prev-text="上一页"
        next-text="下一页"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currpage"
        :page-size="pageSize"
        :total="total"></el-pagination>
        <el-dialog title="成绩详情" :visible.sync="dialogTableVisible">
          <el-table :data="studentResultList" style="width: 100%;margin-top:30px;" border>
            <el-table-column align="header-center" label="报告标题">
              <template slot-scope="scope">
                {{ scope.row.reportTitle }}
              </template>
            </el-table-column>
            <el-table-column align="header-center" label="报告类型">
              <template slot-scope="scope">
                {{ scope.row.reportTypeName }}
              </template>
            </el-table-column>
            <el-table-column align="header-center" label="报告成绩">
              <template slot-scope="scope">
                {{ scope.row.resultValue }}
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>
  </div>
</template>

<script>
import {selectRsultList,exportResult,detail} from '@/api/result'


export default {
  data() {
    return {
      resultList:[],
      param :{
      start: 0,
      limit: 10,
      resultId:'',
      studentName:'',
      teachName:''
      },
      pageSize: 10, //每一页的数据大小
      currpage: 1, //当前页
      total:0,//总条数
      studentResultList:[],
      studentResultParams:{
        studentAccount:''
      },
      dialogTableVisible:false
    }
  },
  //页面打开时执行的方法
  created() {
    this.selectRsultList()
  },
  methods: {

    async detail(row) {
      this.dialogTableVisible = true
      this.studentResultParams.studentAccount = row.studentAccount
      let res = await detail(this.studentResultParams)
      this.studentResultList = res.beans
      this.total = res.bean.total
    },
    async selectRsultList() {
      let res = await selectRsultList(this.param)
      this.resultList = res.beans
      this.total = res.bean.total
    },
    //页大小变化
     handleSizeChange(val) {
      this.pageSize = val;
      this.param.start = this.pageSize*(this.currpage-1)
      this.selectRsultList();
    },
    //页标号变化
    handleCurrentChange(val) {
      this.currpage = val;
      this.param.start = this.pageSize*(this.currpage-1)
      this.selectRsultList();
    },
    selectRsult(){
      this.param.start = 0;
      this.param.limit = 10;
      this.currpage = 1;
      this.selectRsultList()
    },
    async exportResult() {
      this.$confirm('导出所有学生成绩稍后在消息中心获取下载链接, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           exportResult(this.param)
          this.$message({
            type: 'success',
            message: '操作成功，开始导出!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消导出'
          });          
        });

      
    },
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
